<template>
    <div>
        <el-table
                :data="tableData"
                style="width: 100%">

            <el-table-column
                    label="员工编号">
                <template slot-scope="scope">{{scope.row.EMPLOYEE_ID}}
                </template>
            </el-table-column>
            <el-table-column
                    label="姓名">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.FIRST_NAME }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{scope.row.FIRST_NAME }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    label="薪资">
                <template slot-scope="scope">
                    {{scope.row.SALARY}}
                </template>
            </el-table-column>
            <el-table-column
                    label="电话号码">
                <template slot-scope="scope">
                    {{scope.row.PHONE_NUMBER}}
                </template>
            </el-table-column>
            <el-table-column
                    label="入职日期">
                <template slot-scope="scope">
                    {{scope.row.HIRE_DATE}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="x">
                    <el-button
                            size="mini"
                            @click="handleEdit(x.$index, x.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(x.$index, x.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog  title="编辑员工" :visible.sync="dialogFormVisible">
            <el-form :model="stu" :rules="rules" ref="stuForm">
                <el-form-item label="员工名" label-width="100">
                    <el-input style="width:180px" v-model="stu.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="薪资" prop="name" label-width="100">
                    <el-input style="width:180px" v-model="stu.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入职日期" label-width="100">
                    <el-select v-model="stu.sex" placeholder="请选择性别">
                        <el-option label="女" value="0"></el-option>
                        <el-option label="男" value="1"></el-option>
                        <el-option label="人妖" value="10"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sure()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Anounce",
        data(){
return{
    rules: {
        //验证规则的名字必须和属性名一样
        name: [
            { required: true, message: '请输入学生名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
    },
    tableData:[
     {
            id:1,
            name:"暴躁哥",
            age:2,
            sex:"男",
            tel:"13455667788"
        },
        {
            id:2,
            name:"熬白头",
            age:4,
            sex:"女",
            tel:"15677889900"
        },
        {
            id:3,
            name:"鞠崽子",
            age:10,
            sex:"男",
            tel:"13788990098"
        }
    ]

    ,dialogFormVisible:false
    ,stu:{}
    ,inde:-1



}
        }
        ,methods:{
            /*   hhh:function(){
        this.$axios('api/emp-list').then(
               res => {
                   this.tableData = res.data
               }
           ).catch(() => { alert("获取数据失败") })
    },
*/
            handleDelete:function(idx){
               // console.log(idx,"这一行的数据是",row);
                //根据索引删除数组的一行数据
                this.tableData.splice(idx,1);
            },handleEdit(idx,row){
                //显示对话框
                this.dialogFormVisible = true;
// 				this.stu.id = row.id;
// 				this.stu.name = row.name;
// 				this.stu.sex = row.sex;
                this.stu={
                    id:row.id,
                    name:row.name,
                    sex:row.sex
                };
                this.inde=idx;
            },sure(){
                //表单需要验证通过
                this.$refs["stuForm"].validate((valid)=>{
                   // console.log("验证结果",valid)
                    if(valid){
                        //代表验证通过
                        this.dialogFormVisible = false;
                        //点击确定修改数据
                        this.tableData.splice(this.inde,1,this.stu);
                    }else{
                        //代表验证失败
                        this.$message({
                            message: '警告哦，你的名字不对劲',
                            type: 'warning'
                        });
                    }
                });

            }
        }
        ,created:function () {
            this.hhh();
        }

    }
</script>

<style scoped>


</style>